<template>
  <div class="box">
    <div class="tianjia">
      <div class="box-tianjia">编辑活动</div>
      <div class="biaodan">
        <el-form ref="form" :model="sizeForm" label-width="80px" size="medium ">
          <el-form-item label="活动名称 :">
            <el-input v-model="sizeForm.name"></el-input>
          </el-form-item>
          <!-- 上传 -->
          <div class="shangchuan">
            <span>上传 :</span>
            <div>
              <el-upload
                action="https://jsonplaceholder.typicode.com/posts/"
                list-type="picture-card"
                :on-preview="handlePictureCardPreview"
                :on-remove="handleRemove"
              >
                <i class="el-icon-plus"></i>
              </el-upload>
              <el-dialog :visible.sync="dialogVisible">
                <img width="100%" :src="dialogImageUrl" alt="" />
              </el-dialog>
            </div>
          </div>
          <el-form-item label="创建人 :" prop="chaungjianren">
            <el-input v-model="sizeForm.chaungjianren"></el-input>
          </el-form-item>
          <el-form-item label="关联渠道 :">
            <el-select
              v-model="sizeForm.guanlianqudao"
              multiple
              placeholder="请选择渠道"
            >
              <el-option
                v-for="item in options"
                :key="item.name"
                :value="item.name"
                :disabled="item.disabled"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="活动形式 :">
            <el-input
              type="textarea"
              v-model="sizeForm.desc"
              :rows="8"
            ></el-input>
          </el-form-item>
          <el-form-item size="large">
            <el-button type="primary" @click="onSubmit">确定</el-button>
            <el-button @click="qxiao">取消</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>
  
  <script>
import { getChaTableData,getchannelList} from "@/api/index";
import axios from "axios";
export default {
  data() {
    return {
      sizeForm: {
        name: "",
        huodongyouxiaoqi: "",
        chuangjianshijian: "",
        delivery: false,
        desc: "",
        guanlianqudao: "",
        chaungjianren: "",
      },
      options: [
        // {
        //   value: "抖音",
        //   disabled: true  
        // },
        // {
        //   value: "微信广告",
        // },
        // {
        //   value: "小红书",
        // },
      ],
      //   上传
      dialogImageUrl: "",
      dialogVisible: false,
    };
  },
  methods: {
    onSubmit() {
      let _date = new Date();
      this.sizeForm.chuangjianshijian =
        _date.getFullYear() +
        "-" +
        _date.getMonth() +
        1 +
        "-" +
        _date.getDate() +
        " " +
        _date.getHours() +
        ":" +
        _date.getMinutes() +
        ":" +
        _date.getSeconds();
      axios({
        method: "put",
        url: `http://localhost:3000/tableData/${this.$route.query.id}`,
        data: this.sizeForm,
      }).then((item) => {
        console.log(item);
      });
      this.$router.push("/activity");
    },
    // 上传
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    qxiao() {
      this.$router.push("/activity");
    },
  },
  mounted() {
    getChaTableData(this.$route.query.id).then((item) => {
      console.log(item.data[0]);
      this.sizeForm = item.data[0];
    });
    getchannelList().then((item)=>{
        console.log(item.data);
        this.options=item.data
      })
  },
};
</script>
  
  <style scoped>
.box {
  background-color: #fff;
  line-height: 0;
}
.tianjia {
  text-align: left;
  padding: 30px;
  width: 800px;
}
.box-tianjia {
  padding: 20px;
  margin: 10px 0 50px 0;
  font-size: 20px;
  font-weight: 600;
}
.biaodan {
  padding-left: 50px;
}
/* 上传 */
.shangchuan {
  display: flex;
  margin-bottom: 20px;
}
.shangchuan > span {
  font-size: 14px;
  color: #606266;
  margin-left: 35px;
  margin-top: 20px;
  margin-right: 10px;
}
</style>